// 路由的管理文件
// 导入依赖
import Vue from 'vue'
import Router from 'vue-router'
// 导入要显示的页面组件
// import HelloWorld from '../components/HelloWorld.vue'
// import Contact from '../components/Contact.vue'
// import NotFound from '../components/NotFound.vue'
// import Index from '../views/Index.vue'
// import Cate from '../views/Cate.vue'
// import Car from '../views/Car.vue'
// import Mime from '../views/Mime.vue'
// import Layout from '../components/Layout.vue'
// import List from '../views/List.vue'
// import Detail from '../views/Detail.vue'
// ====================
// 以下是懒加载的方式
// 定义一个函数，在跳转页面时才会调用这个函数，执行函数时才会加载组件
const HelloWorld = () => import('../components/HelloWorld.vue')
const Contact = () => import('../components/Contact.vue')
const NotFound = () => import('../components/NotFound.vue')
const Index = () => import('../views/Index.vue')
const Cate = () => import('../views/Cate.vue')
const Car = () => import('../views/Car.vue')
const Mime = () => import('../views/Mime.vue')
const List = () => import('../views/List.vue')
const Detail = () => import('../views/Detail.vue')
const Login = () => import('../views/Login.vue')
const Axios = () => import('../views/Axios.vue')
const Layout = () => import('../components/Layout.vue')

Vue.use(Router);

// 路由表，url和组件的对应关系
// route是局部路由对象，router是全局的实例
const routes = [
  {
    path: '/',
    component: HelloWorld,
    meta: {
      title: '首页'
    }
  },
  // ======== 命名视图 =========
  // {
  //   path: '/',
  //   // 页面中有两个视图，所以需要两个组件，component带上s
  //   components: {
  //     a: HelloWorld,
  //     b: Contact
  //   }
  // },
  {
    path: '/contact',
    // 给路由对象加上名字，命名路由
    name: 'con',
    component: Contact,
    meta: {
      title: '联系人'
    }
  },
  {
    path: '/login',
    component: Login,
    meta: {
      title: '欢迎登陆'
    }
  },
  {
    path: '/axios',
    component: Axios,
    meta: {
      title: 'axios'
    }
  },
  {
    path: '/list',
    component: List,
    // 元信息
    meta: {
      title: '歌曲列表'
    }
  },
  {
    // 路由地址中包含变量，所以多个地址对应一个组件
    path: '/detail/:id',
    component: Detail,
    meta: {
      title: '详情'
    }
  },
  {
    path: '/layout',
    component: Layout,
    // 嵌套路由
    children: [
      {
        path: 'index',
        component: Index
      },
      {
        path: 'cate',
        component: Cate
      },
      {
        path: 'car',
        component: Car,
        // 单个路由独享的守卫
        beforeEnter: (to, from, next) => {
          // 登陆后才可以查看这个页面
          if(localStorage.getItem('username')) {
            next()
          }else {
            next('/login')
          }
        }
      },
      {
        path: 'mime',
        component: Mime
      },
    ]
  },
  // 常规地址放在前面，404的处理放在最后，从前向后匹配
  // 404的处理，第一种方式
  // {
  //   path: '*',
  //   component: NotFound
  // }
  // ======================
  // 404的处理，第二种方式
  {
    path: '/404',
    component: NotFound
  },
  {
    path: '*',
    redirect: '/404'
  }
]

// 定义路由实例
const router = new Router({
  // 路由表
  routes: routes,
  // 路由模式,默认是带有#的hash模式
  mode: 'history',
  // 滚动行为
  scrollBehavior(to, from, savePosition) {
    // 可以通過to.path控制某些页面的滚动
    console.log(to);
    console.log(from);
    return {
      x: 0,
      y: 500,
      behavior: 'smooth'
    }
  }
})

// 全局前置守卫
router.beforeEach((to, from, next)=>{
  // to：即将进入的页面对应的路由对象
  // from：正在离开的页面对应的路由对象
  // debugger
  document.title = to.meta.title || 'vue';
  // 需求：/layout/mime以及/list这两个页面需要登录才能查看，别的页面没有限制
  if(to.path === '/layout/mime' || to.path === '/list') {
    // 需要判断是否登录
    if(localStorage.getItem('username')) {
      // 已经登录，正常跳转
      next();
    }else {
      // 先登录
      next('/login');
    }
  }else {
    // 不需要判断，正常跳转
    // 将执行权交过下一个中间件，一定要写！
    next();
  }
})

// 全局后置守卫
// router.afterEach((to, from) => {
//   console.log('afterEach');
//   console.log(to);
//   console.log(from);
// })

// 暴露
export default router
